<template>
	<view class="container p-bottom" v-if="express.express_name">
		<!-- 物流公司 -->
		<view class="flow-all-money dis-flex b-f padding-box">
			<view class="flex-box">
				<view class="dis-flex flow-all-list-cont">
					<text class="col-7">物流公司: {{ express.express_name }}</text>
				</view>
				<view class="dis-flex flow-all-list-cont">
					<text class="col-7" :selectable="true">物流单号: {{ express.express_no }}</text>
				</view>
			</view>
		</view>
		<!-- 物流动态 -->
		<view class="logis-detail m-top20 b-f">
			<view class="logis-item" :class="{ first: index === 0 }" v-for="(item, index) in express.list" :key="index">
				<view class="logis-item-content">
					<view class="logis-item-content__describe">
						<text class="f-26">{{ item.context }}</text>
					</view>
					<view class="logis-item-content__time">
						<text class="f-22">{{ item.ftime }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			options: {},
			express: {}
		};
	},
	onLoad(options) {
		this.getExpressDynamic(options.order_id);
	},
	methods: {
		/**
		 * 获取物流动态
		 */
		getExpressDynamic(order_id) {
			this.$u.api
				.getOrderExpress(order_id)
				.then(res => {
					this.express = res.data.express;
				})
				.catch(e => {});
		}
	}
};
</script>

<style>
.logis-detail {
	padding: 30rpx;
}

.logis-detail .logis-item {
	position: relative;
	padding: 10px 0 10px 25px;
	box-sizing: border-box;
	border-left: 2px solid #ccc;
}

.logis-detail .logis-item.first {
	border-left: 2px solid #f40;
}

.logis-detail .logis-item:after {
	content: ' ';
	display: inline-block;
	position: absolute;
	left: -6px;
	top: 30px;
	width: 6px;
	height: 6px;
	border-radius: 10px;
	background: #bdbdbd;
	border: 2px solid #fff;
}

.logis-detail .logis-item.first:after {
	background: #f40;
}

.logis-detail .logis-item .logis-item-content {
	position: relative;
	background: #f9f9f9;
	padding: 10rpx 20rpx;
	box-sizing: border-box;
	color: #666;
}

.logis-detail .logis-item.first .logis-item-content {
	background: #ff6e39;
	color: #fff;
}

.logis-detail .logis-item .logis-item-content:after {
	content: '';
	display: inline-block;
	position: absolute;
	left: -10px;
	top: 18px;
	border-left: 10px solid #fff;
	border-bottom: 10px solid #f3f3f3;
}

.logis-detail .logis-item.first .logis-item-content:after {
	border-bottom-color: #ff6e39;
}
</style>
